<template>
  <div>
    <el-card>
      <el-row>
        <el-col :span="24" style="text-align: left">
          <el-form
            :inline="true"
            ref="form"
            :model="formInline"
            label-width="120px"
            class="demo-form-inline"
          >
            <el-form-item label="年份:" prop="dataType">
              <el-select v-model="formInline.year" filterable @change="Time()">
                <el-option
                  v-for="item in yearAll"
                  :key="item.label"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="月份:" prop="type">
              <el-date-picker
                v-model="formInline.month"
                type="monthrange"
                range-separator="至"
                start-placeholder="开始月份"
                end-placeholder="结束月份"
                value-format="yyyy-M"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="search"
                size="small"
                icon="el-icon-search"
              >
                查询
              </el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
    <el-row>
      <el-col :span="24">
        <div style="margin-top: 40px; height: 450px" id="main"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from 'echarts'
import dateFormat from '@/utils/util'
export default {
  name: 'other',
  data() {
    return {
      name: '',
      formInline: {
        year: '',
        month: '',
      },
      yearAll: [
        {
          label: 2019,
          value: 2019,
        },
        {
          label: 2020,
          value: 2020,
        },
      ],
      monthList: [],
      total: [],
      fristTotal: [
        { value: 1098, name: '一月' },
        { value: 1123, name: '二月' },
        { value: 1151, name: '三月' },
        { value: 1182, name: '四月' },
        { value: 1215, name: '五月' },
        { value: 1230, name: '六月' },
        { value: 1262, name: '七月' },
        { value: 1293, name: '八月' },
        { value: 1328, name: '九月' },
        { value: 1200, name: '十月' },
        { value: 1280, name: '十一月' },
        { value: 1208, name: '十二月', itemStyle: { color: '#ff9194' } },
      ], //2019总年度量
      lastTotal: [
        { value: 1108, name: '一月' },
        { value: 1133, name: '二月' }, //2020总年度量
        { value: 1161, name: '三月' },
        { value: 1182, name: '四月' },
        { value: 1205, name: '五月' },
        { value: 1235, name: '六月' },
        { value: 1258, name: '七月' },
        { value: 1283, name: '八月' },
        { value: 1308, name: '九月' },
      ],
    }
  },
  methods: {
    Time() {
      if (this.formInline.year === 2019) {
        this.formInline.month = ['2019-1', '2019-12']
      }
      if (this.formInline.year === 2020) {
        this.formInline.month = ['2020-1', '2020-9']
      }
    },
    search() {
      this.monthList = []
      this.total = []
      this.indexOne = this.formInline.month[0].slice(5)
      this.indexTwo = this.formInline.month[1].slice(5)
      if (this.formInline.year === 2019) {
        this.total = this.fristTotal.slice(this.indexOne - 1, this.indexTwo)
      }
      if (this.formInline.year === 2020) {
        this.total = this.lastTotal.slice(this.indexOne - 1, this.indexTwo)
      }
      this.monthList = this.total.map((item) => item.name)
      this.drawCharts()
    },
    drawPieChart() {
      let that = this
      this.chartPie = echarts.init(document.getElementById('main'))
      this.chartPie.setOption({
        title: {
          text: that.formInline.year + '年度饼状图',
          left: 'center',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        legend: {
          bottom: 0,
          left: 'center',
          data: that.monthList,
        },
        series: [
          {
            name: '年度饼状图',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: that.total,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      })
    },
    drawCharts() {
      this.drawPieChart()
    },
  },
}
</script>

<style scoped>
</style>
